<template>
  <div class="wrap home-loan-container">
    <div class="banner notice-container">
      <van-notice-bar :text="bannerTips" color="#EC5958" background="transparent">
        <span slot="left-icon">
          <img class="notice" src="~@/assets/imgs/notice_icon.png" alt="">
        </span>
      </van-notice-bar>
    </div>
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo" :isActivity=true />
    </div>

    <!-- <div class="top-bg" >
      <img src="~@/assets/imgs/top-bg.png" alt="">
    </div> -->
    <div class="app-text">
      <p class="app-name">MOREGOLD</p>
      <p class="app-name-desc">Provided borrowing services to<br /> 900,000 users</p>
    </div>

    <div class="top-container">
      <p class="top-box">Loan Amount (PHP)</p>
      <p class="product-num">{{sliderValue | formatCurrency(',')}}</p>

      <van-slider v-model="sliderValue"
            class="custom-slider"
            bar-height="8px"
            :min='3000'
            :max='30000'
            :step="500"
            active-color='#EC5958'
            inactive-color="#FBE5E5">
        <template #button>
          <div class="custom-button" />
        </template>
      </van-slider>
      <p class="loan-length">Loan Length (Days)</p>
      <ul class="loan-days">
        <li :key='item' v-for="(item, index) in dayList" @click="() => checkDays = index" :class="{ active: index === checkDays }">{{item}}</li>
      </ul>
      <doFaceButton class="btn-ui product-button" :pageTrackerInfo="pageTrackerInfo" text="Instantly Apply" source="home_loan"/>
    </div>
    <img class="home-bottom" src="~@/assets/imgs/home-bottom.png" alt="">
    <CashBenefitsStart v-if="showCashBenefitsStart" @checkStep="checkStep"/>
    <CashBenefitsEnd v-if="showCashBenefitsEnd" @checkStep="checkStep"/>
    <WindowDialog ref="showDialog" :pageTrackerInfo="pageTrackerInfo"/>
    <!-- 首次进来的奖励 -->
    <GetRewards v-model="showDanReward" @checkStep="checkStep"/>
  </div>
</template>
<script>
import { NoticeBar, Slider } from 'vant';

import doFaceButton from '@/components/doFaceButton';
// import Hybrid from '@/components/uzone-hybrid';
import WindowDialog from '../components/windowDialog'
import GetRewards from '../components/doubleDanEvent/GetRewards.vue'
import CashBenefitsStart from '../components/doubleDanEvent/CashBenefitsStart.vue'
import CashBenefitsEnd from '../components/doubleDanEvent/CashBenefitsEnd.vue'
export default {
  name: 'loan',
  components: {
    [NoticeBar.name]: NoticeBar,
    [Slider.name]: Slider,
    doFaceButton,
    WindowDialog,
    GetRewards,
    CashBenefitsStart,
    CashBenefitsEnd
  },
  data() {
    return {
      bannerTips: '',
      productAmount: '15000',
      oldProductAmount: '15000',
      curProductDuration: 90,
      sliderValue: 30000,
      dayList: [120, 270],
      checkDays: 0,
      showDanReward: false,
      showCashBenefitsStart: false,
      showCashBenefitsEnd: false,
      pageTrackerInfo: {
        page: 'home',
        startTime: new Date().getTime()
      }
    };
  },
  methods: {
    checkStep () {
      this.$refs.checkFaceInfo.returnTo()
    },
    getBannerInfo() {
      this.$api.getZmdInformation().then(res => {
        let { status, error, data } = res;
        if (status == '1' && error == '00000000') {
          this.bannerTips = data
        }
      })
    },
    async getActivityWindow () {
      const user = this.$storage.get('user')
      const res = await this.$api.activityWindow({ userPhone: user.phone})
      const { status, error, data } = res
      if (status === '1' && error === '00000000') {
        const { firstWindow, activityActive, activityEnd } = data
        this.showDanReward = firstWindow === 1
        this.showCashBenefitsStart = activityActive === 1
        this.showCashBenefitsEnd = activityEnd === 1
        if (this.showDanReward) {
          this.$hybrid.action('ee', {
            content: 'home_activity_popup_show'
          })
        }
        if (this.showCashBenefitsStart) {
          this.$hybrid.action('ee', {
            content: 'home_banner_show'
          })
        }
      }
    },
    handleProductAmountChange(target) {
      target.value = Number(target.value.toString().replace(/[^\d]/g, '').replace('.', '')) || ''
      if (target.value >= 3500 && target.value <= 15000) {
        this.productAmount = target.value
        this.oldProductAmount = target.value
      } else {
        this.productAmount = this.oldProductAmount
      }
    },
    showDialog(path){
      if(path=='/product/productList'){
        let { phone } = this.$storage.get('user');
        this.$api.windowSwitch({userPhone:phone}).then(res=>{
          let { status, error, data } = res;
          if (status == '1' && error == '00000000') {
            if(data){
              let appName = this.$storage.get('appName') || 'Takecash';
              let appPackage = this.$storage.get('appPackage') || 'com.takecash.app';
              let str = `${appName} , ${appPackage}`;
              this.$buryPoint.action({
                eventName: 'home_quotaPopup_show',
                eventValue: phone ? { login: 1 } : { login: 0 },
                ...this.pageTrackerInfo
              });
             this.$refs.showDialog.isShow=true
            }
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    let path = from.fullPath;
    next(vm=>{
      vm.showDialog(path)
    })
  },
  created() {
    // APP首页 - 首页 - 曝光
    // this.$hybrid.action('ee', {
    //   content: 'home_page_show',
    //   value: '',
    // });

    // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
    const me = this;
    this.$hybrid.action('pushMessage', {
      callback(data) {
        if (data) {
          // @todo zm 安卓传来的json 做跳转
          // me.$router.push()
          if (data && data.status === 1 && data.data) {
            let datas = JSON.parse(data.data);
            if (datas && datas.clickAction) {
              me.$router.push({
                path: datas.clickAction,
                query: {
                  ...datas
                }
              });
            }
          }
        }
      }
    })

    this.getBannerInfo()
    this.getActivityWindow()
  },
  beforeDestroy () {
    this.pageEndAction()
  },
  mounted () {
    this.pageStartAction()
    // APP首页 - 首页 - 曝光
    const user = this.$storage.get('user');
    this.$buryPoint.action({
      eventName: 'home_page_show',
      eventValue: user && user.code ? { login: 1 } : { login: 0 },
      ...this.pageTrackerInfo
    });
  }
}
</script>
<style lang="scss">
@import './index.scss';
</style>
